<template>
  <el-form
    ref="formRef"
    style="max-width: 600px"
    :model="equitmentForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="设备Sn" prop="deviceSn">
      <el-input v-model="equitmentForm.deviceSn"  autocomplete="off" />
    </el-form-item>
    <el-form-item label="设备密钥" prop="pkey">
      <el-input
        v-model="equitmentForm.pkey"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="设备名" prop="deviceNickname">
      <el-input v-model="equitmentForm.deviceNickname" />
    </el-form-item>
    <el-form-item>
      <div style="margin-left: auto;">
       <el-button type="primary" @click="submitForm">
        确认
      </el-button>
      <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AddEquitment' })
import type { FormInstance, FormRules } from 'element-plus'
import * as EquitmentApi from '@/api/mall/equitment/manager'
const formRef = ref<FormInstance>()
const message = useMessage() // 消息弹窗
const props = defineProps({

})
const emit = defineEmits([ 'refresh','close'])
const equitmentForm = reactive({
  deviceSn: '',
  pkey: '',
  deviceNickname:"",
})
const rules = reactive<FormRules<typeof equitmentForm>>({
  deviceSn: [{  required: true,message: '不能为空',trigger: 'blur' }],
  pkey: [{  required: true,message: '不能为空',trigger: 'blur' }],
  deviceNickname: [{  required: true, message: '不能为空',trigger: 'blur' }],
})

const submitForm = () => {
  if (!formRef) return
  formRef.value?.validate(async(valid) => {
    if (valid) {
     await EquitmentApi.createEquitment(equitmentForm)
     message.success('添加设备成功')
     emit('close')
     emit('refresh')
    } 
  })
}

const resetForm = () => {
  if (formRef){
     formRef?.value?.resetFields()
  }
}
//暴露对外方法
defineExpose({ })
</script>